<template>
    <div id='editClass'>
        <div class="breadcrumb">
            <img src="../../../../static/img/campus_icon_1.png" class="head_img">
            <span class="title" @click="cancel">
                教师管理</span>/ 编辑课程
        </div>

        <div class="list">
            <div class="list_head">
                <span class="head_name">
                    <span>学期：{{semesterName}}</span>
                    <span style="margin-left:20px;"> 姓名:{{name}}</span>
                    <span style="margin-left:20px;">手机号：{{username}}</span>
                    <span style="margin-left:20px;">教职工号：{{campusid}}</span>
                </span>
                <el-button class="save" type="primary" @click="editClass(1)">添加课程</el-button>
                <el-button class="cancel" type="primary" @click="cancel()">返回</el-button>
            </div>
            <div style="margin-top: 15px;">
                <el-table :data="list">
                    <el-table-column prop="name" label="课程名称" width="200">
                    </el-table-column>
                    <el-table-column align="right">
                        <template scope="scope">
                            <el-button size="small" type="text" @click="editClass(scope.row)">编辑</el-button>
                            <el-button size="small" type="text" @click="deleteClass(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <el-dialog :title="titleName + '课程'" :visible.sync="dialogFormVisible">
            <el-input v-model="className" @keyup.enter.native="add" placeholder="请输入新增课名称"></el-input>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="add">确定</el-button>
                <el-button type="primary" @click="dialogFormVisible = false" :plain="true">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                list: [],
                name: "",
                uid: "",
                id: "",
                sid: "",
                mid: "",
                username: "",
                campusid: "",
                className: "",
                titleName: "",
                semesterName: "",
                formLabelWidth: "80px",
                dialogFormVisible: false
            };
        },
        computed: mapState({ user: state => state.user }),
        mounted() {
            this.mid = this.$util.getUrlParam("mid");
            this.sid = this.$util.getUrlParam("sid");
            this.getTeacher();
        },
        methods: {
            //新增课程
            add() {
                let name = this.className.trim();
                let url = this.$util.domain + "/campusadminapi/v1/class/save";

                if (name.length == 0) {
                    this.dialogFormVisible = false;
                    return;
                }
                this.$http({
                    url,
                    method: "POST",
                    body: JSON.stringify({
                        className: name,
                        mid: parseInt(this.mid),
                        sid: parseInt(this.sid),
                        id: parseInt(this.id) || null,
                        rootUnid: parseInt(this.user.rootUnid)
                    })
                }).then(response => {
                    if (response.data.error == 10000) {
                        this.dialogFormVisible = false;
                        this.$util.successMsg(`${this.titleName}成功`);
                        this.className = "";
                        this.getTeacher();
                    } else {
                        this.dialogFormVisible = false;
                        this.$util.errorMsg(response.data.message);
                    }
                });
            },
            // 取消
            cancel() {
                let sid = this.$util.getUrlParam("sid");
                let pageNum = this.$util.getUrlParam("pageNum");
                let condition = this.$util.getUrlParam("condition");
                let params = {
                    sid, pageNum, condition
                }
                this.$util.refreshTo('/#/teacherManage', params);
            },
            editClass(row) {
                this.id = "";
                this.className = "";
                this.titleName = "添加"
                if (row != 1) {
                    this.id = row.id;
                    this.titleName = "修改";
                    this.className = row.name;
                }

                this.dialogFormVisible = true;
            },
            deleteClass(row) {
                let url = this.$util.domain + "/class/remove";
                let end = this.$util.getUrlParam("endTime");
                this.$http({
                    url,
                    method: "POST",
                    body: JSON.stringify({
                        force: 0,
                        cid: parseInt(row.id),
                        endTime: parseInt(end)
                    })
                }).then(response => {
                    if (response.data.type == 200) {
                        this.$util.successMsg('删除成功');
                        this.getTeacher();
                    } else if (response.data.type == 10001) {
                        this.$confirm(response.data.msg, "课程信息删除", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消"
                        }).then(() => {
                            this.$http({
                                url,
                                method: "POST",
                                body: JSON.stringify({
                                    force: 1,
                                    cid: parseInt(row.id),
                                    endTime: parseInt(end)
                                })
                            }).then(data => {
                                if (data.data.type == 200) {
                                    this.$util.successMsg('删除成功');
                                } else {
                                    this.$util.errorMsg(response.data.msg);
                                }
                            });
                        });
                    } else {
                        this.$util.errorMsg(response.data.msg);
                    }
                });
            },
            //获取教师信息
            getTeacher() {
                this.list = [];
                let url = this.$util.domain + "/campusadminapi/v1/class/list";

                if (!this.mid) {
                    return;
                }
                this.$http({
                    url,
                    method: "GET",
                    params: {
                        mid: this.mid,
                        sid: this.sid
                    }
                }).then(response => {
                    if (response.data.error == 10000) {
                        let dataObj = response.data.data;
                        
                        this.uid = dataObj.uid;
                        this.name = dataObj.name;
                        this.campusid = dataObj.campusid;
                        this.username = dataObj.username;
                        let classList = dataObj.classesList;
                        this.semesterName = dataObj.semesterName;

                        if (classList && classList.length > 0) {
                            for (let i = 0; i < classList.length; i++) {
                                let $index = i + 1,
                                    $id = classList[i].id,
                                    $name = classList[i].name;

                                this.list.push({
                                    id: $id,
                                    name: $name,
                                    index: $index
                                });
                            }
                        }
                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                });
            }
        }
    };
</script>

<style scoped>
    #editClass {
        padding-top: 80px;
        height: calc(100% - 100px);
    }

    .title {
        color: #0398ff;
    }

    .infoHead {
        width: 100%;
        height: 36px;
        background-color: #eee;
        text-indent: 30px;
        line-height: 36px;
        font-size: 12px;
        color: #333;
    }

    .phone {
        width: 40%;
        margin-left: 40px;
    }
</style>